import React, { useEffect, useState } from 'react'
import { FlatList, StyleSheet, TouchableOpacity, Text, View, Image, ImageBackground, ScrollView, Dimensions, ToastAndroid } from 'react-native';
import axios from '../../api/axios';
import moment from 'moment';
import { baseURL, useAuth } from '../../context/AuthProvider';
import Swipeout from 'react-native-swipeout';
import AsyncStorage from '@react-native-async-storage/async-storage';

const { width, height } = Dimensions.get('window');
const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#fff' }}>{children}</Text>
        </TouchableOpacity>
    )
}
//传过来了userid
const Collection = ({ navigation, route }) => {
    let userid = route.params.userid;
    //用于存放收藏列表数据
    const [collectionList, setCollectionList] = useState([]);
    const [collectId, setCollectId] = useState();
    const toMessage = (item) => {
        navigation.navigate('message', {
            item: item
        });
        axios.post('/guide/addread', {
            guideid: item.guideid
        }).then(res => {
            console.log(res);
        })
    }
    const delCollect = (id) => {
        // console.log(collectionList.filter(item => item.guideid != id));

        axios.post('/news/collect', {
            guideid: id,
            collected: false,
            userid: userid,
            collect_time: new Date().getTime()
        }).then(res => {
            if (res.code == 500) {
                ToastAndroid.show("已取消收藏", 2000);
                let arr = collectionList.filter(item => item.guideid != id);
                setCollectionList(arr);
            }
        })
    }
    var swipeoutBtns = [
        {
            text: '取消收藏',
            type: 'delete',
            onPress: () => {
                console.log(collectId);
                axios.post('/news/collect', {
                    guideid: collectId,
                    collected: false,
                    userid: userid,
                    collect_time: new Date().getTime()
                }).then(res => {
                    if (res.code == 500) {
                        ToastAndroid.show("已取消收藏", 2000);
                        let arr = collectionList.filter(item => item.guideid != collectId);
                        setCollectionList(arr);
                    }
                })
            }
        }
    ]
    useEffect(() => {
        axios.post('/collect/all', {
            userid: userid
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                setCollectionList(res.data);
            }
        })
    }, [])
    return (
        <View>
            <FlatList
                data={collectionList}
                renderItem={({ item }) => {
                    return (
                        <Swipeout right={swipeoutBtns} onOpen={() => { setCollectId(item.guideid) }} backgroundColor={'#F2F2F2'} autoClose={true}>
                            <View style={{ alignItems: 'center', marginBottom: 5, marginTop: 5 }} key={item.guideid}>
                                <View style={{ width: '95%' }} key={item.guideid}>
                                    <View style={{ backgroundColor: '#fff', borderRadius: 10 }}>
                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                            <Text style={styles.addTime}>{moment(item.date).format("YYYY-MM-DD HH:mm")}</Text>
                                            {/* <Btn onPress={() => delCollect(item.guideid)} style={{ marginRight: '7%', marginBottom: '2%' }} color={'blue'}>取消收藏</Btn> */}
                                        </View>
                                        <TouchableOpacity style={styles.outBox} onPress={() => toMessage(item)}>
                                            <View style={styles.textBox}>
                                                <Text style={styles.textTitle}>
                                                    {item.title}
                                                </Text>
                                                <Text style={{ color: '#c1c1c1', fontSize: 13.5 }}>
                                                    阅读 {item.readnum}
                                                </Text>
                                            </View>
                                            <View style={{ width: '25%', alignItems: 'center', }}>
                                                <Image
                                                    style={styles.textImg}
                                                    source={{ uri: baseURL + item.coverimgsmall }}
                                                />
                                            </View>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            </View>
                        </Swipeout>)
                }}
            />
        </View>)
}
const styles = StyleSheet.create({
    addTime: {
        height: 40,
        lineHeight: 40,
        marginLeft: width * 0.035,
        color: '#c1c1c1'
    },
    textBox: {
        width: '75%',
        justifyContent: 'center',
        paddingLeft: '3%',
        maxHeight: height * 0.14
    },
    textTitle: {
        lineHeight: 25,
        fontSize: 15,
        width: '92%',
        maxHeight: '60%',
        marginBottom: '2%'
    },
    textImg: {
        width: width * 0.17,
        height: width * 0.17,
        backgroundColor: '#fee'
    },
    outBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: '2.5%'
    },
});


export default Collection;